import React from 'react';
import style from './style.process';
import * as d3 from 'd3';
import util from '../../../util';

class OkrProcess extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'OkrProcess';
  }
  componentDidMount() {
    const {
      width,
      height,
      value,
      radius,
    } = this.props;
    this.svg = d3.select(this.refs.svg).append("svg")
        .attr("width", width)
        .attr("height", height)
        .style('border-radius', `${radius||0}px`)
      .append("g")
        .attr("transform", "translate(0,0)");
    this.svg.append("rect")
      .style("fill", "#e9eef7")
      .attr("width", width)
      .attr("height", height)
    this.rect = this.svg.append("rect")
      .style("fill", "#6ebcfd")
      .attr("width", 0)
      .attr("height", height);
    this.rect.transition().duration(1500)
      .attr("width", width * value)
  }
  componentWillReceiveProps(nextProps) {
    const {
      width,
      value,
    } = nextProps;
    if(!util.isShallowEqual(this.props, nextProps)){
      this.rect.transition().duration(1500).attr("width", width * value)
    }
  }
  render() {
    return (
      <div className={style['process-area']}>
        <div ref={'svg'} key={'svg'} className={style['process-box']} />
      </div>
    );
  }
}

export default OkrProcess;
